<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;padding: 0;
        }
        div{
            box-sizing: border-box;
        }
        #item01 {
            width: 120px;
            height: 80px;
            position: relative;
            background-color: gray;
            border-radius: 20px 20px 0 0;
            border: 3px solid;
            margin: 10px;
        }

        #item02 {
            z-index: 1000;
            width: 100px;
            height: 80px;
            background-color: gray;
            border-radius: 10px;
            line-height: 80px;
            position: absolute;
            top: -20px;
            left: 8px;
            border: 3px solid;
            text-align: center;
        }
        #box{
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
          </style>
</head>

<body>
    <div id="box">
        <table id="seatTable"></table>
    </div>
    <script>
        const tabelId = document.getElementById('seatTable');
        let seatTxt = '';
        for (let i = 1; i <= 4; i++) {
            seatTxt += `<tr>`;
            for (let j = 1; j <= 10; j++) {
                if (i == 3 && (j == 5 || j == 6)) {
                    seatTxt += '<td><div id=item01><div id=item02>已售</div></div></td>';
                    continue;
                }
                seatTxt += `<td><div id=item01><div id=item02>${i}${'排'}${j}${'座'}</div></div></td>`;

            }
            seatTxt += `</tr>`;
        }
        tabelId.innerHTML = seatTxt;
    </script>
</body>

</html>